<%@ include file="../include/import.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
<jsp:include page="../include/htmlhead.jsp"/>
</head>
<body>
<jsp:include page="../include/headbody.jsp"/>
<jsp:include page="../home/leftnav.jsp"/>
<div id="content">
	<div id="content-header">
		<h1>Session Listing</h1>
		<%--
		<div class="btn-group">
			<button class="btn"><i class="icon-eye-open"></i> View</button>
		</div> --%>
	</div>
	<div id="breadcrumb">
		<a href="main.sw" title="Go to Home" class="tip-bottom"><i class="icon-home"></i>Home</a>
		<a href="list.sw" class="current">Session</a>
	</div>
	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span12">
				<div class="widget-box">
					<div class="widget-title">
						<span class="icon"><i class="icon-th"></i></span>
						<h5>Search</h5>
					</div>
					<div class="widget-content">
					<div class="row-fluid">
						<div class="span4">
				             <div class="control-group">
                                <label class="control-label">Data Range From</label>
                                <div class="controls">
                                	<input type="text" value="${filterdatestart}" class="datepicker" id="filterdatestart" />
                                </div>
                            </div>
                        </div>
                        <div class="span4">
				             <div class="control-group">
                                <label class="control-label">To</label>
                                <div class="controls">
                                	<input type="text" value="${filterdateend}" class="datepicker" id="filterdateend" />
                                </div>
                            </div>
                        </div>
					</div>
					<div class="row-fluid">
						<div class="span4">
							<div class="control-group">
                                <label class="control-label">User</label>
                                <div class="controls">
                                	<input type="text" id="filteruser" />
                                </div>
                            </div>
						</div>
						<div class="span4">
							<div class="control-group">
                                <label class="control-label">IP Address</label>
                                <div class="controls">
                                	<input type="text" id="filterip" />
                                </div>
                            </div>
						</div>
						<div class="span4">
							<div class="control-group">
                                <label class="control-label">Mac</label>
                                <div class="controls">
                                	<input type="text" id="filtermac" />
                                </div>
                            </div>
						</div>
					</div>
					</div>
				</div>  
				<div class="widget-box">
					<div class="widget-title">
						<span class="icon"><i class="icon-th"></i></span>
						<h5>Session List</h5>
					</div>
					<div class="widget-content nopadding">
						<table class="table table-bordered table-striped table-hover data-table DTTT_selectable">
							<thead>
								<tr>
									<th width="20%">Date/Time</th>
									<th width="10%">User</th>
									<th width="20%">IP Address</th>
									<th width="20%">Mac</th>
									<th width="15%">Data In</th>
									<th width="15%">Data Out</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td class="dataTables_empty">Loading data from server</td>
								</tr>
							</tbody>
						</table> 
					</div>
				</div>
			</div>
		</div>
		<jsp:include page="../include/copyright.jsp"/>
	</div>
</div>
<script type="text/javascript">
	$(document).ready(function(){
		
		var oTable = $('.data-table').dataTable( {
			"bSort": false,
	        "bServerSide": true,
			"sDom": '<""l>t<"F"fp>',
	        "bJQueryUI": true,
	        "bSearchable": false,
			"sPaginationType": "full_numbers",
	        "sAjaxSource": "ajaxlist.sw" 
	    } );
	    $('input[type=checkbox],input[type=radio],input[type=file]').uniform();

		$('select').select2();
		$('.datepicker').datepicker({
			format: 'dd/mm/yyyy'
		});	
		
		/* $('.data-table tbody tr').live('click', function () {
			 if ( $(this).hasClass('row_selected') ) {
		            $(this).removeClass('row_selected');
		        }
		        else {
		            $(this).addClass('row_selected');
		        }
		 }); */
		
		$('#editrow').click(function(){
			 var selectedRows = oTable.$('tr.row_selected');
			 if(selectedRows.length!=1){
				 $.gritter.add({title:'Centient Notification',text:'Please select 1 record only'});
				 return;
			 }
			 var url = "edit.sw?id="+selectedRows[0].id;
			 $(location).attr('href',url);
		 });
		 
		 $('#deleterow').click(function(){
			 var selectedRows = oTable.$('tr.row_selected');
			 if(selectedRows.length<=0){
				 $.gritter.add({title:'Centient Notification',text:'Please select at least 1 record'});
				 return;
			 }
			 var url = "delete.sw";
			 for(var i=0; i<selectedRows.length; i++){
				 url+=(i==0)?'?':'&';
				 url+='id='+selectedRows[i].id;
			 }
			 $(location).attr('href',url);
		 });
		 
		 $('#filteruser').change(function(){
			oTable.fnFilter($('#filteruser').val(), 1);
		 });
		 $('#filterip').change(function(){
			oTable.fnFilter($('#filterip').val(), 2);
		 });
		 $('#filtermac').change(function(){
			oTable.fnFilter($('#filtermac').val(), 3);
		 });
		 $('#filteruser').keypress(function(){
			oTable.fnFilter($('#filteruser').val(), 1);
		 });
		 $('#filterip').keypress(function(){
			oTable.fnFilter($('#filterip').val(), 2);
		 });
		 $('#filtermac').keypress(function(){
			oTable.fnFilter($('#filtermac').val(), 3);
		 });
		 $('#filterdatestart').datepicker().on("changeDate", function(ev){
			 oTable.fnFilter($('#filterdatestart').val(), 4); 
		 });
		 $('#filterdateend').datepicker().on("changeDate", function(ev){
			 oTable.fnFilter($('#filterdateend').val(), 5); 
		 });
		 oTable.fnFilter($('#filterdatestart').val(), 4);
		 oTable.fnFilter($('#filterdateend').val(), 5);
		 
		<c:if test="${not empty errmsg}"> 
		$.gritter.add({
			// (string | mandatory) the heading of the notification
			title: 'Centient Notification',
			// (string | mandatory) the text inside the notification
			text: '${errmsg}'
		});
		</c:if>
		
	});
</script>
<jsp:include page="../include/footerscript.jsp"/>
</body>
</html>	